
@const MARKER-SIZE: 3dip;

notes-list 
{ 
  display:block; 
  flow:vertical;
  size:*;
  overflow-y: scroll-indicator;
  prototype: NotesList url(notes-view.tis);
}

notes-list > li {
  font-size:12dip;
  prototype: ListNote url(notes-view.tis);
  display:block; 
  flow: horizontal;
  width:*;
  border-left:@MARKER-SIZE solid transparent;
} 

notes-list > li.active-event {
  background-image:url(path:M1024 1375v-190q0-14-9.5-23.5t-22.5-9.5h-192q-13 0-22.5 9.5t-9.5 23.5v190q0 14 9.5 23.5t22.5 9.5h192q13 0 22.5-9.5t9.5-23.5zm-2-374l18-459q0-12-10-19-13-11-24-11h-220q-11 0-24 11-10 7-10 21l17 457q0 10 10 16.5t24 6.5h185q14 0 23.5-6.5t10.5-16.5zm-14-934l768 1408q35 63-2 126-17 29-46.5 46t-63.5 17h-1536q-34 0-63.5-17t-46.5-46q-37-63-2-126l768-1408q17-31 47-49t65-18 65 18 47 49z);
  background-repeat: no-repeat;
  background-position-top: 1em;
  background-position-right: 1em;
  background-size:1em;
  fill:#f77;
}

notes-list > li > div 
{
  width:*;
  padding:1em 0 1em 1em;
  border-spacing: 0.5em;
  flow: grid(1 2,
             1 3);
}

notes-list > li:current {
  background-color:var(selection,#c2e5fe);
}


notes-list > li picture {
  display:inline-block;
  width:40dip;
  height:50dip;
  foreground-size:contain;
  foreground-position: 0% 0%;
  border:1px solid #aaa;
  margin:*;
  //background: linear-gradient(80deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 80%, rgba(255,255,255,1) 100%);
  background-color: #fff;
  image-rendering: crisp-edges;
}

notes-list > li caption {
  //font-size:120%;
  //overflow-x: hidden;
  //white-space: nowrap;
  //text-overflow:ellipsis;
  overflow: hidden;
  width:*;
  line-height:1.1em;
  height:3.3em;
}

notes-list > li text {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width:*;
  line-height:1.1em;
  height:1.2em;
  //height:max-content;
}

notes-list > li text > span.www {
  color:blue;
}

notes-list > li tags {
  display:block;
  width:@MARKER-SIZE;
  height:*;
  flow:vertical;
  overflow:hidden;
}

notes-list > li tags > tag {
  display:block;
  width:@MARKER-SIZE;
  height:*;
  color:transparent;
}

notes-list > li tags > tag[color=0] { background-color: transparent; }
notes-list > li tags > tag[color=1] { background-color: @FC1; }
notes-list > li tags > tag[color=2] { background-color: @FC2; }
notes-list > li tags > tag[color=3] { background-color: @FC3; }
notes-list > li tags > tag[color=4] { background-color: @FC4; }
notes-list > li tags > tag[color=5] { background-color: @FC5; }
notes-list > li tags > tag[color=6] { background-color: @FC6; }

notes-list > li[book-color=0] { border-color: transparent; }
notes-list > li[book-color=1] { border-color: @FC1; }
notes-list > li[book-color=2] { border-color: @FC2; }
notes-list > li[book-color=3] { border-color: @FC3; }
notes-list > li[book-color=4] { border-color: @FC4; }
notes-list > li[book-color=5] { border-color: @FC5; }
notes-list > li[book-color=6] { border-color: @FC6; }

notes-view 
{
  //prototype: NotesView url(notes-view.tis);
  display:block; 
  flow:vertical; 
  background: var(notes-list-back, #e8e8e8);  
}

notes-view > header {
  prototype: NotesFilter url(notes-filter.tis);
  flow:horizontal;
  vertical-align: middle;
  @HEADER-BAND;
}

/*notes-view > footer {
  @FOOTER-BAND;
  behavior:form;
}

notes-view > footer > label { @FOOTER-BAND-LABEL; }
notes-view > footer > output { @FOOTER-BAND-OUTPUT; }
notes-view > footer > button { @FOOTER-BAND-CTL; }*/

notes-view > header > input.search {
  display:block;
  width:*;
  height:38dip;
  background: none;
  border: none;
  border-radius:0;
  color:#777;
  font-size:14dip;
  padding: 0dip 6dip 0dip 2em;
  foreground-image:url(path:M35.525,31.228l-8.88-8.882c1.444-2.238,2.298-4.895,2.298-7.752c0-7.909-6.438-14.343-14.346-14.343
    c-7.911,0-14.343,6.434-14.343,14.343c0,7.911,6.433,14.344,14.343,14.344c2.856,0,5.513-0.849,7.752-2.294l8.88,8.88
    c0.295,0.297,0.782,0.297,1.076,0l3.22-3.221C35.824,32.008,35.824,31.523,35.525,31.228z M4.81,14.593
    c0-5.396,4.391-9.788,9.788-9.788c5.398,0,9.787,4.392,9.787,9.788c0,5.398-4.389,9.789-9.787,9.789
    C9.2,24.382,4.81,19.991,4.81,14.593z);
  foreground-repeat:no-repeat;
  foreground-size:1em;
  foreground-position:0.6em 50%;
  foreground-image-cursor: pointer;
  fill:#aaa; 
  stroke:none;
  box-sizing:content-box;
}

notes-view > header > input.search:not(:empty),
notes-view > header > input.search:focus {
  background:#fff;
  color:#000;
}

notes-view > header.has-events > knob[name=order-toggle] { visibility:visible; }

/*popup#note-preview {
  background:#fffee2;
  width:400dip;
  height:max-content;
  max-height:300dip;
}

popup#note-preview > htmlarea {
  background:none;
  border:none;
  prototype: NotePreview url(htmlarea.tis);
  size:*;
  overflow:hidden;
}*/
